<!doctype html>
<head>
    <meta charset="utf-8" />
    <title>网页翻译测试</title>
</head>
<body>
<div>
    <button id="english">英文</button>
    <a onclick="fred()">测试</a>
    <div>橘子</div>
</div>
<div>梨</div>
<div>测试</div>
<div>零食</div>
<div>水果</div>
<div>上班</div>
<div>ShopXO 免费开源系统，可商用，可二次开发。</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.17.0/js/md5.js"></script>
<script type="text/javascript">
    function transformLanguage(newLanguage) {
        // 获取所有dom元素中文
        var transformStr = '';
        var temp_index = 0;
        // 获取所有dom元素
        function getChildDom(dom, type, data = {}) {
            if(type == 'read') {
                [...dom.children].forEach(v => {
                    // 判断中文
                    // /^[\u0391-\uFFE5]+$/
                    var re= /[\u4e00-\u9fa5]/g;
                    // 防止某些标签有内容并且有标签 ，或者有空格
                    var vHtml = $(v).contents().filter(function (index, content) {return content.nodeType === 3}).text().trim();
                    // 跳过script标签
                    if (re.test(vHtml) && v.tagName != 'SCRIPT') {
                        // 使用\n换行拼接、接口将返回数组
                        transformStr += `${vHtml}\n`
                    }
                    // 递归获取元素
                    getChildDom(v, type, data);
                })
            }else {
                [...dom.children].forEach(v => {
                    // 判断中文
                    // /^[\u0391-\uFFE5]+$/
                    var re= /[\u4e00-\u9fa5]/g;
                    var vHtml = $(v).contents().filter(function (index, content) {return content.nodeType === 3}).text().trim();
                    // 跳过script标签
                    if (re.test(vHtml) && v.tagName != 'SCRIPT') {
                        if((data[temp_index] || null) != null)
                        {
                            var transOld = data[temp_index]['src'];
                            var transNew = data[temp_index]['dst'];
                            // 防止标签里面还有标签，所以只替换里面的html,使用replace
                            $(v).html(
                                $(v).html().replace( transOld, transNew)
                            )
                            temp_index++;
                        }
                    }
                    // 递归获取元素
                    getChildDom(v, type, data);
                })
            }
        }
        getChildDom(document,'read');

        if((transformStr || null) != null)
        {
            getTranslateData();
            // 获取翻译
            // 接口申请地址 https://api.fanyi.baidu.com/
            function getTranslateData() {
                var appid = '20210425000799675';   // 百度翻译API的appid
                var key = 'VNlqhTcdY1QU09HfHN5L';   // 百度翻译API的key
                var salt = (new Date).getTime();
                var query = transformStr;
                var from = 'zh';
                var to = newLanguage;
                debugger
                console.log("1111---");
                if(newLanguage=="zh"){
                    console.log("---");
                    to = newLanguage;
                    from = 'en';
                }
                var str1 = appid + query + salt + key;
                var sign = md5(str1);
                $.ajax({
                    url: 'fred.php',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        q: query,
                        appid: appid,
                        salt: salt,
                        from: from,
                        to: to,
                        sign: sign
                    },
                    success: function(data) {
                        data.trans_result && getChildDom(document,'write',data.trans_result);
                    }
                });
            }
        }
    }

    // 页面加载完成再执行
    window.onload = function () {
        $("#china").click(function(){
            console.log(1);
            transformLanguage('zh');
        })
        $("#english").click(function(){
            console.log(2);
            transformLanguage('en');
        })
    };
    function fred(){
        alert(1);
    }
</script>

</body>